<template>
  <div class="data-detail">
    <el-form ref="form" :inline="true" class="data-detail__from" :model="form">
      <el-form-item label="活动名称:" prop="activityName">
        <div>{{ form.activityName }}</div>
      </el-form-item>
      <br />
      <el-form-item class="time-style" label="活动时间:" prop="activityName">
        <span>{{ form.startTime }}</span>
        至
        <span class="end-time">{{ form.endTime }}</span>
      </el-form-item>
      <br />
      <el-form-item label="活动期次:" prop="byStages">
        <span v-show="activeStatus.length === 0">该活动无分期</span>
        <el-select
          v-model="form.status"
          clearable
          placeholder="请选择"
          v-show="activeStatus.length !== 0"
          @change="handleChange"
          style="width:240px"
        >
          <template v-for="item in activeStatus">
            <el-option
              v-if="
                item.stageStatus !== 'NOT_STARTED' &&
                  item.stageStatus !== 'NOT_START'
              "
              :key="item.id"
              :label="item.flowerStageName"
              :value="item.id"
            ></el-option>
          </template>
        </el-select>
      </el-form-item>
      <br />
      <!-- 发布作品数 -->
      <el-form-item label="发布作品数:" prop="workCount">
        <div>{{ form.workCount ? form.workCount : 0 }}</div>
      </el-form-item>
      <!-- 分享数 -->
      <el-form-item label="分享数:" prop="shareCount">
        <div>{{ form.shareCount ? form.shareCount : 0 }}</div>
      </el-form-item>
      <!-- 发布作品人数 -->
      <el-form-item label="活动参与人数:" prop="publishedCount">
        <div>{{ form.publishedCount ? form.publishedCount : 0 }}</div>
      </el-form-item>
      <br />
      <el-form-item label="活动UV:" prop="userViewCount">
        <div>{{ form.userViewCount ? form.userViewCount : 0 }}</div>
      </el-form-item>
      <!-- <el-form-item label="活动期次:" prop="name"></el-form-item> -->
      <br />
      <el-form-item label="统计时间" prop="createTime">
        <el-date-picker
          v-model="formInline.createTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>

    <div id="dataDetailLine" class="box"></div>
  </div>
</template>

<script>
import {
  getSearchList,
  exportUrl
} from '@/api/dataStatistics/behaviorAnalysis/index.js' // 接口
import { getStages } from '@/api/flowerActive/partakeReward/index'
import {
  getDataList,
  getDataChart
} from '@/api/flowerActive/flowerActiveList/index'
import { getInterval } from '@utils/pubFunction'
export default {
  watch: {
    'formInline.createTime': {
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 1) {
          this.formInline.startDate = newVal[0]
          this.formInline.endDate = newVal[1]
        } else {
          this.formInline.startDate = ''
          this.formInline.endDate = ''
        }
        this.searchList()
      }
    },
    'form.status': {
      handler(newVal, oldVal) {
        if (newVal && newVal.length > 1) {
          this.formInline.createTime = []
        }
        this.searchList()
      }
    }
  },
  data() {
    return {
      form: {
        activityName: '',
        startTime: '',
        endTime: '',
        // 是否分期
        byStages: false,
        status: '',
        stageId: '',
        createTime: [],
        publishedCount: '', //活动参与人数
        shareCount: '', //分享数
        userViewCount: '', //活动UV
        workCount: '' //发布作品数
      },
      formInline: {
        source: '', //来源
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        createTime: [],
        stageId: ''
      },
      identity: '',
      activeStatus: [
        { stageId: '', flowerStageName: '全部', stageStatus: 'OTHER' }
      ],

      option: {
        legend: {
          data: ['发布作品数', '活动UV', '分享数', '活动参与人数'],
          left: 40
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params, ticket, callback) {
            let total = 0
            params.forEach((item) => {
              total += item.value
            })
            let ary = params.map((item, index) => {
              if (item.value == undefined || item.value !== item.value) {
                item.value = 0
              }
              let percent = ((item.value / total) * 100).toFixed(2)
              // 小圆点显示
              let dotColor = `<span class="dotColor" style="background-color:${item.color}"></span>`
              return `${dotColor}${item.seriesName}：${item.value}，${percent}%</br>`
            })
            let result = `${params[0].name}</br>${ary.join('')}`
            return result
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: {
            length: 5
          },
          splitLine: {
            show: false
          },
          boundaryGap: false
        },
        yAxis: {
          type: 'value'
        },
        series: [
          { type: 'line' },
          { type: 'line' },
          { type: 'line' },
          { type: 'line' },
          { type: 'line' }
        ]
      },
      dataDetailLine: null
    }
  },
  created() {
    this.form.status = this.activeStatus[0].stageId
  },
  mounted() {
    // 活动明细
    this.getDataList()
    // 初始化echarts
    this.echartsInit()
    // 获取列表
    this.searchList()
  },
  methods: {
    handleChange() {
      this.getDataListAll()
    },
    getDataList() {
      let params = { ...this.formInline.stageId }
      getDataList(this.$route.query.id, params, (res) => {
        this.form = res
        this.formInline.createTime = [res.startTime, res.endTime]
        this.getStages(this.$route.query.id)
        // 获取列表
        this.searchList()
      })
    },
    getDataListAll() {
      let params = { stageId: this.form.status }
      getDataList(this.$route.query.id, params, (res) => {
        this.form.workCount = res.workCount //作品发布数
        this.form.userViewCount = res.userViewCount //活动UV
        this.form.shareCount = res.shareCount //分享数
        this.form.publishedCount = res.publishedCount //活动参与人数
      })
      // 获取列表
      this.searchList()
    },
    // 活动周期
    getStages(id) {
      getStages(id, (res) => {
        this.activeStatus = this.activeStatus.concat(res)
      })
    },
    echartsInit() {
      this.dataDetailLine = this.echarts.init(
        document.getElementById('dataDetailLine')
      )
      let _this = this
      $(window).resize(function() {
        //这里写内容
        _this.dataDetailLine.resize()
      })
      this.dataDetailLine.setOption(this.option)
    },
    /* 获取列表 */
    async searchList() {
      var dataobj = {
        stageId: this.form.status, //获取期数
        startDate: this.formInline.startDate, // 开始时间
        endDate: this.formInline.endDate // 结束时间
      }
      if (dataobj.stageId == undefined) {
        dataobj.stageId = ''
      }
      let obj = Object.assign({}, { id: this.$route.query.id }, dataobj)
      this.dataDetailLine.showLoading()
      await getDataChart(
        obj,
        (response) => {
          //计算轴间隔
          let data = response.data
          let dataLength = response.data.length
          let interval = 0
          if (dataLength > 10) {
            interval = getInterval(dataLength, 10)
          }
          //赋值
          let opt = {
            xAxis: {
              data: data,
              axisLabel: {
                interval: interval
              }
            },
            series: response.series
          }
          this.dataDetailLine.setOption(opt)
          this.dataDetailLine.hideLoading()
        },
        (response) => {
          this.dataDetailLine.hideLoading()
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.data-detail {
  margin: 20px 20px;
  padding: 20px 20px;
  :deep(.el-form--inline .el-form-item__label) {
    font-weight: 600;
  }
  .time-style {
    span {
      margin-right: 50px;
    }
    .end-time {
      margin-left: 50px;
    }
  }
  .box {
    width: 100%;
    height: 400px;
  }
  .dotColor {
    display: inline-block;
    margin-right: 5px;
    border-radius: 10px;
    width: 9px;
    height: 9px;
  }
}
</style>

<style>
.el-date-editor .el-range-separator {
  padding: 0 0;
}
</style>
